<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery轻量级拖动剪裁头像图片插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>jQuery轻量级拖动剪裁头像图片插件 <span>A jQuery plugin designed to provide gallery view for images</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Image-Effects/201612034236.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="container">
		  <div class="imageBox">
		    <div class="thumbBox"></div>
		    <div class="spinner" style="display: none">Loading...</div>
		  </div>
		  <div class="action"> 
		    <div class="new-contentarea tc"> 
		    	<a href="javascript:void(0)" class="upload-img">
		      		<label for="upload-file">上传图像</label>
		      </a>
		      <input type="file" class="" name="upload-file" id="upload-file" />
		    </div>
		    <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
		    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
		    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
		  </div>
		  <div class="cropped"></div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Image-Effects/201608063830.html">
			  <img src="related/1.jpg" width="300" alt="支持移动手机的响应式图片剪裁jQuery插件"/>
			  <h3>支持移动手机的响应式图片剪裁jQuery插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Image-Effects/201510292721.html">
			  <img src="related/2.jpg" width="300" alt="支持移动设备触摸手势的jQuery图片裁剪插件"/>
			  <h3>支持移动设备触摸手势的jQuery图片裁剪插件</h3>
			</a>

		</div>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript" src="js/cropbox.js"></script>
	<script type="text/javascript">
	$(window).load(function() {
		var options =
		{
			thumbBox: '.thumbBox',
			spinner: '.spinner',
			imgSrc: 'img/avatar.jpg'
		}
		var cropper = $('.imageBox').cropbox(options);
		$('#upload-file').on('change', function(){
			var reader = new FileReader();
			reader.onload = function(e) {
				options.imgSrc = e.target.result;
				cropper = $('.imageBox').cropbox(options);
			}
			reader.readAsDataURL(this.files[0]);
			this.files = [];
		})
		$('#btnCrop').on('click', function(){
			var img = cropper.getDataURL();
			$('.cropped').html('');
			$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
			$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
			$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
		})
		$('#btnZoomIn').on('click', function(){
			cropper.zoomIn();
		})
		$('#btnZoomOut').on('click', function(){
			cropper.zoomOut();
		})
	});
	</script>
</body>
</html>